
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加员工</title>
</head>
<body>
   <form action="emp" id="addEmp" method="post">

       <%--获取登录失败后返回的信息--%>
       <span id="msg">${msg}</span> <br>
       <%--任何一个功能写的时候，如果思路不太清晰，建议从页面开始往下写--%>
       员工姓名：<input type="text" name="e_name" id="e_name"><br>
       员工年龄：<input type="text" name="e_age" id="e_age"><br>
       员工地址：<input type="text" name="e_address" id="e_address"><br>
       员工电话：<input type="text" name="e_phone" id="e_phone"><br>

         <%--
              加了一个隐藏域，客户看不到但是会随着表单提交。
              这里的method是请求参数的,前面的是请求方式的method
         --%>
       <input type="hidden" name="method" value="add">

       <br><input type="submit" value="保存">

   </form>

   <%--
          对一些添加的数据进行校验
    --%>
   <script>
       var e_name = document.getElementById("e_name");
       var e_age = document.getElementById("e_age");

       //姓名不能为空
       e_name.onblur = function () {
           if(this.value == ""){
               msg.innerHTML= "姓名不能为空";
               this.focus();
           }
       }
       //年龄不能为空
       e_age.onblur = function () {
           if(this.value == ""){
               msg.innerHTML= "年龄不能为空";
               this.focus();
           }
           if( this.value >130 || this.value <0  || isNaN(this.value) ){
               msg.innerHTML= "年龄不符合实际情况";
               this.focus();
           }
       }

       //表单提交之前，检测姓名和年龄不能为空
       addEmp.onsubmit = function () {
           if(e_name.value == ""){
               msg.innerHTML = "姓名不能为空";
               e_name.focus();
               return false;
           }
           if(e_age.value == ""){
               msg.innerHTML = "年龄不能为空";
               e_age.focus();
               return false;
           }
           return true ;
       }

   </script>

</body>
</html>
